<template>
  <div :class="[toggleEditStatus ? 'div' : 'page-form-block']">
    <!-- 统计 -->
    <template v-if="!toggleEditStatus">
      <summary-info :summaryList="summaryLease" />
      <a-divider />
      <summary-info :summaryList="summaryMember" />
    </template>
    <template v-else>
      <slot></slot>
    </template>
    <!-- 修改租赁信息 -->
    <div class="edit-lease-btn-wrapper">
      <a-button type="primary" class="edit-lease-btn" @click="toggleEditFn">{{ toggleEditStatus ? '取消修改' : '修改租赁信息' }}</a-button>
    </div>
  </div>
  <a-divider />
</template>

<script setup name="ShortOrderEdit">
  import { ref, computed, nextTick } from 'vue'
  import summaryInfo from '../../../components/summary-info.vue'

  const props = defineProps({
    orderDetail: Object,
    rules: Array,
    orderStatus: Object,
  })
  const emits = defineEmits(['toggle'])

  const toggleEditStatus = ref(false)
  const toggleEditFn = () => {
    toggleEditStatus.value = !toggleEditStatus.value

    nextTick(() => {
      emits('toggle', toggleEditStatus.value)
    })
  }

  const summaryLease = computed(() => {
    let memberInfoDto = props.orderDetail.memberInfoDto || {}
    let orderInfo = props.orderDetail.orderInfo || {}
    return [
      [
        {
          label: '预计租赁周期',
          value: orderInfo.startTime ? `${orderInfo.startTime} - ${orderInfo.endTime}` : '-',
        },
        {
          label: '承租人',
          value: orderInfo.memberName,
        },
        { label: '联系电话', value: memberInfoDto?.phone },
      ],
      [
        { label: '租期', value: orderInfo.rentDays },
        { label: '车牌号', value: orderInfo.carLicenseNo },
      ],
      [
        { label: '预订车型', value: orderInfo.originalModelName },
        { label: '交车车型', value: orderInfo.carModelName },
      ],
    ]
  })

  const summaryMember = computed(() => {
    const { orderInfo = {} } = props.orderDetail
    let tempList = [
      [
        { label: '取车门店', value: orderInfo.siteName },
        { label: '还车门店', value: orderInfo.returnSiteName },
      ],
      [
        { label: '交车人', value: orderInfo.giveStaffName },
        { label: '交车时间', value: orderInfo.actualStartTime },
      ],
    ]
    if (props.orderStatus == 'orderCompleted') {
      tempList.push([
        { label: '还车人', value: orderInfo.returnStaffName },
        { label: '还车时间', value: orderInfo.actualEndTime },
      ])
    }
    return tempList
  })
</script>
<style lang="less" scoped>
  .edit-lease-btn-wrapper {
    text-align: center;
    .edit-lease-btn {
      margin: 30px auto 0;
      width: 190px;
    }
  }
</style>
